import React from 'react';
import {createRoot} from 'react-dom/client';
const root = createRoot(document.getElementById('root'))
//1.JSX插件 在JSX中可以使用花括号来插入任意的JS表达式
//JS表达式 指的是JS变量和常量以及它们之间任意组件，要求必须要能返回一个值
const name = 'zhufeng';
const age = '18';
const element1 = <div>hello,{name}</div>
//变量的组合
const element2 = <div>hello,{name+age}</div>
//算术表达式
const element3 = <div>hello,{1+1}</div>
//不能放if for 
//const element4 = <div>hello,{if(){} for()}</div>

//2.可以给JSX传递属性
//可以使用类似于HTML的方式为JSX元素定义属性
//如果属性是JS的保留字的话，就需要特殊注意一下
//如果要给JSX指定类名的话要用className而非class
//for要改为htmlFor
//如果想给JSX指定行内样式的话，需要传递行内样式对象
//对象的属性也需要是小驼峰命名法
let styleObj = {color:'red',backgroundColor:'green'};
const element5 = <div 
id="box" 
className="container" 
htmlFor="home"
style={styleObj}
>hello,{1+1}</div>
//let element6 = <div id="box" class="container" for="home" style="color: red; background-color: green;">hello,2</div>;
//3.JSX子元素 JSX标签可以包含子元素
//Objects are not valid as a React child 
let obj = {age:18}
let arr = [1,2,3];
let element6 = (
     <div>
        {undefined}
        {null}
        string
        {"string"}
        {5}
        {arr}s
        <h1>hello</h1>
        <p>world</p>
     </div>
)
root.render(element6);
/**
 * 原生JS里，要在JS里操作DOM的话也是这样命名的
 * dom.style.color='red';
 * dom.style.backgroundColor='green';
 * dom.style.fontSize = '16px';
 * dom.className = 'newClass';
 * 
 */
